<template>
  <ul class="programa">
    <li>
      <h3>{{ $t("language.business.altitle") }}</h3>
      <span>{{ $t("language.business.alt1") }}</span>
      <p>{{ $t("language.business.altext1") }}</p>
      <span>{{ $t("language.business.alt2") }}</span>
      <p>{{ $t("language.business.altext2") }}</p>
    </li>

    <li>
      <NuxtImg src="/img/bb7.png" alt="" />
    </li>
  </ul>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.programa {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100%;
  @include flex(row, flex-start, flex-start);
 padding: 140px 40px 40px  40px ;
  li:nth-child(1) {
    width: 60%;
    height: 100%;
    h3 {
      font-size: 30px;
      color: #fff;
      margin-bottom: 40px;
    }

    p {
      width: 100%;
      @include flex(row, flex-start, center);
      font-size: 18px;
      border-radius: 18px;
      color: #666;
      margin: 0px 0 30px 0;
    }

    span {
      font-size: 18px;
      color: #b5bac8;
      margin: 0px 0 30px 0;
      display: block;
    }
  }

  li:nth-child(2) {
    flex: 1;
    height: 100%;
    position: relative;
    img {

      position: absolute;
      bottom: 0;
      right: 0;
      height: 100%;
      display: block;

    }
  }
}
</style>
